import { ReactNode } from 'react';

type BarPos = 'top' | 'bottom';
type BadgeType = number | string;
// Tabbar
export interface ITabBarAPI {
    barTintColor?: string; // tabbar 背景色
    tintColor?: string; // 选中的字体颜色
    unselectedTintColor?: string; // 未选中的字体颜色
    hidden?: boolean; // 是否隐藏
    prefixCls?: string; // 样式前缀
    noRenderContent?: boolean; // 不渲染内容部分
    prerenderingSiblingsNumber?: number; // 预加载相邻的tab内容, Infinity: 加载所有的tab内容, 0: 仅加载当前tab内容, 当页面较复杂时，建议设为0，提升页面加载性能
    tabBarPosition?: BarPos; // tabbar 位置
}

export interface ITabBarItemAPI {
    badge?: BadgeType; // 徽标数
    dot?: boolean; // 是否在右上角显示小红点（在设置badge的情况下失效）
    onPress?: () => void; // bar 点击触发，需要自己改变组件 state & selecte={true}
    selected?: boolean; // 是否选中
    icon?: JSX.Element; // 默认展示图片
    selectedIcon?: JSX.Element; // 选中后的展示图片
    title: string; // 标题文字
    key: string; // 唯一标识
}

export interface IFlexAPI {
    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse'; // 项目定位方向，值可以为 row,row-reverse,column,column-reverse, RN 仅支持row,column
    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; // 子元素的换行方式，可选nowrap,wrap,wrap-reverse, RN 仅支持nowrap,wrap
    justify?: 'start' | 'end' | 'center' | 'between' | 'around'; // 子元素在主轴上的对齐方式，可选start,end,center,between,around
    align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch'; // 子元素在交叉轴上的对齐方式，可选start,center,end,baseline,stretch RN仅支持start,end,center,stretch
    alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch'; // 有多根轴线时的对齐方式，可选start,end,center,between,around,stretch
}

export interface IBlankAPI {
    size?: 'sm' | 'md' | 'lg'; // 两翼留白的间距，可选sm,md,lg
}

export interface ISpaceAPI {
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; // 上下留白的间距，可选xs,sm,md,lg,xl
}

export interface INavBarAPI {
    mode?: 'dark' | 'light'; // 样式 enum{'dark', 'light'}
    icon?: ReactNode | null; // 出现在最左边的图标占位符
    leftContent?: any; // 导航左边内容
    rightContent?: any; // 导航右边内容
    onLeftClick?: (event: MouseEvent) => void; // 导航左边点击回调
}